<template>
    <div class="advertisement-pos-list">
        <div class="search-content">
            <el-input class="search-content-input" v-model="searchContent.adPosName" placeholder="广告位名称"></el-input>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="resetSearchData">重置</el-button>
        </div>
        <div class="search-list">
            <el-table :data="adList" border :height="oHeight" @selection-change="handleSelectionChange">
                <el-table-column
                        fixed="left"
                        align="center"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="adPosName"
                        label="广告位名称"
                        min-width="120">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="adPosCate"
                        label="类别"
                        min-width="60"></el-table-column>
                <el-table-column
                        align="center"
                        prop="adPosShowStyle"
                        label="展示方式"
                        min-width="60"></el-table-column>
                <el-table-column
                        align="center"
                        prop="widthSize"
                        label="宽度/字数"
                        min-width="60"></el-table-column>
                <el-table-column
                        align="center"
                        prop="height"
                        label="高度"
                        min-width="60"></el-table-column>
                <el-table-column
                        align="center"
                        prop="price"
                        label="单价（金币/月）"
                        min-width="60"></el-table-column>
                <el-table-column
                        align="center"
                        prop="currentShow"
                        label="正在展示"
                        min-width="60"></el-table-column>
                <el-table-column
                        align="center"
                        prop="alreadyPub"
                        label="已发布"
                        min-width="60"></el-table-column>
                <el-table-column
                        align="center"
                        prop="isUsed"
                        label="是否启用"
                        min-width="60">
                    <template slot-scope="scope">
                        <el-switch
                                @change="switchUse(scope.row)"
                                v-model="scope.row.isUsed">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="views"
                        label="点击率"
                        min-width="60"></el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        min-width="90">
                    <template slot-scope="scope">
						<a class="btn-cell" href="javascript:;" @click="handleUpdate(scope.row.id)">更新</a>
                        <span>&nbsp;|&nbsp;</span>
                        <a class="btn-cell" href="javascript:;" @click="handleShowDrawer(scope.row.id)">编辑</a>
                        <span>&nbsp;|&nbsp;</span>
                        <a class="btn-cell" href="javascript:;" @click="showDeleteDialog(scope.row.id)">删除</a>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <a class="btn-bottom" @click="showDeleteDialog" href="javascript:;">删除</a>
                    <a class="btn-bottom" href="javascript:;" @click="handleShowDrawer">新增广告位</a>
                </div>
                <div class="paginationOne">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchContent.currentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="searchContent.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog
                :before-close="handleClose"
                title="提示"
                :visible="dialogVisible"
                width="30%">
            <span>{{dialogMsg}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="confirmDelete">确 定</el-button>
            </span>
        </el-dialog>
        <el-drawer
                @close="onClose"
                :title="title"
                ref="elDrawer"
                :destroy-on-close="true"
                :append-to-body="true"
                size="85%"
                :visible.sync="drawer"
                :direction="direction">
            <advertisement-pos-add-edit @addEditSuccess="search" @cancel="onCancel" :id="editedAdPosId"></advertisement-pos-add-edit>
        </el-drawer>
    </div>
</template>

<script>
	import { resize } from "@/common/js/height.js";
	import AdvertisementPosAddEdit from './advertisement-pos-add-edit';

	export default {
		data() {
			return {
				title: '',
				editedAdPosId: 0,
				drawer: false,
				direction: 'rtl',
				options: [
					{label: '全部', value: ''},
					{label: '未过期', value: 0},
					{label: '已过期', value: 1}
				],
				oHeight: 800,
				searchContent: {
					adPosName: '',
					currentPage: 1,
					pageSize: 10
				},
				needDeleteAdPos: [],
				dialogVisible: false,
				dialogMsg: '',
				adList: [],
				total: 0,
				multipleSelection: []
			}
		},
		computed: {

		},
		methods: {
			onClose() {
				this.editedAdPosId = 0;
			},
			switchUse(adPos) {
				console.log(adPos);
				this.$http.post('/admin/advertising/index.php?act=advManager&op=isUse', {
					ap_id: adPos.id,
					is_use: Number(adPos.isUsed)
				}).then(res => {
					if (res.code == 1) {

					} else {
						adPos.isUsed = !adPos.isUsed
						alert(res.msg);
					}
				})
            },
			computeCateText(val) {
				switch (val) {
					case 0:
						return '图片'
						break
					case 1:
						return '文字'
						break
					case 2:
						return '幻灯'
						break
					case 3:
						return 'Flash'
						break
				}
			},
			computeShowStyle(val) {
				switch (val) {
					case 0:
						return '幻灯片'
						break
					case 1:
						return '多广告展示'
						break
					case 2:
						return '单广告展示'
						break
				}
			},
			onCancel() {
				this.editedAdPosId = 0;
				this.$refs.elDrawer.closeDrawer()
			},
			handleUpdate(id){
				if (typeof id == 'number'){
					this.$http.post('/common/index.php?act=ad&op=getAd', {
						ap_id: id,
						'reflash': 'reflash'
					}).then(res => {
						if (res.code == 200) {
							alert('广告更新成功！')
						} else {
							alert(res.msg);
						}
					})
				}
			},
			handleShowDrawer(id) {
				if (typeof id == 'number') {
					this.editedAdPosId = id;
					this.title = '编辑广告位';
				} else {
					this.title = '新增广告位';
				}
				this.drawer = true;
			},
			showDeleteDialog(id) {
				if (typeof id == 'number') {
					this.needDeleteAdPos.push(id);
				} else {
					if (this.multipleSelection.length) {
						this.needDeleteAdPos = this.multipleSelection.map(function(item) {
							return item.id;
						});
					} else {
						this.$message({
							type: 'error',
							message: '请选择要删除的广告位'
						});
						return;
					}
				}
				if (this.needDeleteAdPos.length == 1) {
					this.dialogMsg = '删除此广告位？';
				} else {
					this.dialogMsg = '删除选中的所有广告位？';
				}
				this.dialogVisible = true;
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleClose() {
				this.cancelDelete();
			},
			cancelDelete() {
				this.dialogVisible = false;
				this.dialogMsg = '';
				this.needDeleteAdPos = [];
			},
			confirmDelete() {
				this.deleteAdPos(this.needDeleteAdPos.join(','));
				this.cancelDelete();
			},
			deleteAdPos(id) {
				this.$http.post('/admin/advertising/index.php?act=advManager&op=deleteAdvSpace', {
					ap_id: id
				}).then(res => {
					if (res.code == 1) {
						this.search();
					} else {
						alert(res.msg);
					}
				})
			},
			resetSearchData() {
				this.searchContent.adPosName = '';
			},
			search(page) {
				if (typeof page == 'number') {
					this.searchContent.currentPage = page;
				}
				this.getListData();
			},
			handleSizeChange(pageSize) {
				this.searchContent.pageSize = pageSize;
				this.searchContent.currentPage = 1;
				this.getListData();
			},
			handleCurrentChange(page) {
				this.searchContent.currentPage = page;
				this.getListData();
			},
			getListData() {
				const data = {};
				data.currentPage = this.searchContent.currentPage;
				data.eachNum = this.searchContent.pageSize;
				data.search_name = this.searchContent.adPosName;
				this.$http.post('/admin/advertising/index.php?act=advManager&op=advSpaceManager', data).then(res => {
					if (res.code == 1) {
						if (res.data && res.data.list.length) {
							this.adList = res.data.list.map(item => {
								return {
									id: item.ap_id * 1,
									adPosName: item.ap_name,
									adPosCate: this.computeCateText(item.ap_class * 1),
									adPosShowStyle: this.computeShowStyle(item.ap_display * 1),
									widthSize: item.ap_width,
									height: item.ap_height,
									price: item.ap_price,
									currentShow: item.adv_display,
									alreadyPub: item.adv_num,
									isUsed: Boolean(item.is_use * 1),
									views: item.click_num
								}
							});
							this.total = parseInt(res.data.total);
						} else {
							this.adList = [];
							this.total = 0;
						}
					}
					else if (res.code == 1000) {
						this.adList = [];
						this.total = 0;
					}
					else {
						alert(res.msg);
					}
				})
			}
		},
		mounted() {
			resize(this)
		},
		created() {
			this.getListData();
		},
		components: {
			AdvertisementPosAddEdit
		},
		name: "advertisement-pos-list"
	}
</script>

<style lang="scss" scoped>
    .search-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        &-input {
            width: 200px;
        }
        .time-range-wrapper {
            .time-range-label {
                font-size: 14px;
            }
            display: flex;
            align-items: center;
            /deep/.el-range-separator {
                box-sizing: content-box;
            }
        }
    }
    .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .btn-bottom {
        background: #409EFF;
        color: #fff;
        border: 0;
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 3px;
        display: inline-block;
    }
    .btn-bottom + .btn-bottom {
        margin-left: 15px;
    }
    .btn-cell {
        color: #409eff;
        cursor: pointer;
    }
    .preview-wrapper {
        width: 25px;
        height: 25px;
        position: relative;
        display: flex;
        cursor: pointer;
    }
    .preview-wrapper>img {
        width: 25px;
        height: 25px;
    }
    .preview-wrapper>.preview {
        position: absolute;
        left: 0;
        top: 100%;
        display: none;
        background: #FFF;
        padding: 5px;
        border: solid 5px #71CBEF;
        z-index: 1000;
    }
    .preview-wrapper:hover>.preview {
        display: flex;
    }
    /deep/ .el-drawer.rtl {
        overflow-y: auto;
        top: 50px;
        height: auto;
    }
    /deep/ .el-table .cell {
        overflow: visible;
    }
</style>
